/* eslint no-dupe-keys: 0, no-mixed-operators: 0 */
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import {Axios} from '../common/common';
import { ListView } from 'antd-mobile';
import { BrowserRouter,Link,Redirect } from 'react-router-dom';
import searchImg from '../img/search.png'
import icon1 from '../img/icon1.png'
import icon2 from '../img/icon2.png'

function MyBody(props) {
    return (
        <div className="am-list-body my-body">
            <span style={{ display: 'none' }}>you can custom body wrap element</span>
            {props.children}
        </div>
    );
}
// var data = [];
// data = [
//     {
//         id:'123456789123456789',
//         movieName: '毒液',
//         director: '李慧',
//         starring: '李慧',
//         portrait: 'lihui',  //头像
//         newsTitle: '北上', //简介
//         newsCont: '这部男默女泪的电影不只这么简单', //简介
//         portrait: 'https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=3777497698,1021271857&fm=179&app=42&f=JPEG?w=121&h=140', //剧照
//         runningTime: '90分钟', //片长
//         grade: '9.2', //评分
//     }
// ]
// const NUM_SECTIONS = 5;
// const NUM_ROWS_PER_SECTION = 5;
// let pageIndex = 0;
//
// const dataBlobs = {};
// let sectionIDs = [];
// let rowIDs = [];
// function genData(pIndex = 0) {
//     for (let i = 0; i < NUM_SECTIONS; i++) {
//         const ii = (pIndex * NUM_SECTIONS) + i;
//         const sectionName = `Section ${ii}`;
//         sectionIDs.push(sectionName);
//         dataBlobs[sectionName] = sectionName;
//         rowIDs[ii] = [];
//
//         for (let jj = 0; jj < NUM_ROWS_PER_SECTION; jj++) {
//             const rowName = `S${ii}, R${jj}`;
//             rowIDs[ii].push(rowName);
//             dataBlobs[rowName] = rowName;
//         }
//     }
//     sectionIDs = [...sectionIDs];
//     rowIDs = [...rowIDs];
// }

class Demo extends React.Component {
    constructor(props) {
        super(props);
        const getSectionData = (dataBlob, sectionID) => dataBlob[sectionID];
        const getRowData = (dataBlob, sectionID, rowID) => dataBlob[rowID];

        const dataSource = new ListView.DataSource({
            getRowData,
            getSectionHeaderData: getSectionData,
            rowHasChanged: (row1, row2) => row1 !== row2,
            sectionHeaderHasChanged: (s1, s2) => s1 !== s2,
        });

        this.state = {
            dataSource: [],
            isLoading: true,
            height: document.documentElement.clientHeight * 3 / 4,
            searching: false,
            searchValue: ''
        };
    }

    getMovieQuery = () =>{
        let _this = this;
        // console.log('item=',item)
        // '/query/:'+_this.state.searchValue

        // Axios('get','/query/'+value,{},function (res) {
        Axios('get','/query','',function (res) {
            console.log('res=',res)
            let queryData = res.list;
            _this.setState({
                dataSource: queryData
            })
        },function (err) {
            console.log(err);
        })

    }
    getSearchQuery = () =>{
        let value = this.state.searchValue || ''
        Axios('get','/proxy?s={'+value+'}',{},function (res) {
            console.log('查询=',res)
        },function(err){
            console.log(err)
        })
    }
    getId = () => {
        let id = 460000200008034638;
        Axios('get','/restful/{'+id+'}',{},function (res) {
            console.log('id=',res)
        },function(err){
            console.log(err)
        })

    }


    componentDidMount() {
        this.getId();
        this.getMovieQuery();
    }

    searchClick = () => {
        this.setState({
            searching: true
        })
    }
    searchBlur = () => {
        // console.log('失焦')
        this.setState({
            searching: false,
            searchValue: ''
        })
    }
    handleChange = (event) => {
        console.log(event.target.value)
        // this.setState({
        //     searchValue: event.target.value
        // })
        let data = this.state.dataSource;
        let dataNew = [];
        data.map((item,index)=>{
            if(item.movieName == event.target.value ) {
                console.log(item.movieName)
                // dataNew.push(item)
                this.getSearchQuery()
            } else {
                console.log('')
            }
        })
        console.log(dataNew)
        if(dataNew.length>0) {
            this.setState({
                dataSource:dataNew
            })
        }
        console.log('this.state.dataSource=',this.state.dataSource)
    }
    goDetail =()=> {

    }
    goCarousel = () => {
        this.props.history.push('/movieCarousel')

    }

    render() {
        return (
            <div className="container">
                <div className="search">
                    <div className={`banner ${this.state.searching ?'opacity':''}`} >电影列表</div>
                    <div className={`search_bg ${this.state.searching?'toLengthDiv':''}`}>
                        <div className={`search_logo ${this.state.searching?'toLength':''}`} onClick={this.searchClick}>
                            <img src={searchImg} style={{width: '20px',marginRight: '5px'}} alt=""/>
                            <input placeholder="搜索" value={this.state.searchValue} onChange={this.handleChange} />
                        </div>
                    </div>
                </div>
                <div className="tab">
                    <div className="tab_left">
                        <img src={icon1} alt=""/>
                    </div>
                    <div className="tab_right" onClick={this.goCarousel}>
                        {/*<Link to="/movieCarousel" className="nav" id=""></Link>*/}
                        <img src={icon2} alt=""/>
                    </div>
                </div>
                <div className="main" onClick={this.searchBlur}>
                    {
                        this.state.dataSource.map((item,index)=>{
                            return (
                                <div className="list" onClick={this.goDetail}>
                                    <div className="list_left">
                                        <img className="list_left_img" src={item.portrait} alt="" />
                                    </div>
                                    <div className="list_right">
                                        <div className="list_top">
                                            <div style={{ lineHeight: 1 }}>
                                                <div><span style={{ fontSize: '18px',marginBottom: '10px',display: 'inline-block' }}>{item.movieName}</span></div>
                                                <div className="fontStyle2">淘票票评分  <span style={{ marginBottom: '8px' , color: '#FF6E27'}}>{item.grade}</span> </div>
                                                <div className="fontStyle2">导演：{item.director}</div>
                                                <div className="fontStyle2">主演：{item.starring}</div>
                                            </div>
                                        </div>
                                        {item.newsTitle &&
                                        <div className="list_bot">
                                            <div className="list_bot_news_title">{item.newsTitle}</div>
                                            <div className="list_bot_news_cont">{item.newsCont}</div>
                                        </div>
                                        }
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>
                <style>
                    {`
                    .fontStyle2 {
                        font-size: 14px;
                        color: #777;
                        margin-bottom: 10px
                     }
                    `}
                </style>
            </div>
        );
    }
}

export default Demo;
